<template>
  <el-dialog
      :title="editNoticeData ? 'Edit' : 'Create New'"
      @open="open"
      @close="close"
      :visible.sync="dialogVisible">
    <div>
      <el-form :model="form" label-position="top" size="small" ref="form" :rules="formRules">
        <el-form-item label="Notifications Name" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="Notifications Type" prop="type">
          <el-row>
            <el-col :span="18">
              <el-select v-model="form.type" style="width: 100%" @input="changeColor">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="colour">
                <el-color-picker v-model="form.colour" size="small"></el-color-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="Who will receive this notifications" class="fontBold">
          <el-radio-group v-model="form.tenants">
            <div class="boxPadding">
              <el-radio label="all">All Tenants</el-radio>
            </div>
<!--            <div class="boxPadding">-->
<!--              <el-radio label="custom">Custom Tenants</el-radio>-->
<!--            </div>-->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="When to send notifications" class="fontBold" prop="executionType">
          <el-radio-group v-model="form.executionType">
            <div class="boxPadding">
              <el-radio :label="1">Send Immediately</el-radio>
            </div>
<!--            <div class="boxPadding">-->
<!--              <el-radio :label="2">Send from</el-radio>-->
<!--              <el-form-item prop="sendTime">-->
<!--                <el-date-picker-->
<!--                    v-model="form.sendTime"-->
<!--                    type="datetimerange"-->
<!--                    range-separator="To"-->
<!--                    :picker-options="pickerOptions"-->
<!--                    start-placeholder="Start Time"-->
<!--                    end-placeholder="End Time">-->
<!--                </el-date-picker>-->
<!--              </el-form-item>-->
<!--            </div>-->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Where to send notifications" class="fontBold">
          <el-tabs type="border-card" style="margin-top: 10px" shadow="never">
            <el-tab-pane label="MSPbots">
              <sendMSPbots ref="sendMspbots" :dialogVisible="dialogVisible"></sendMSPbots>
            </el-tab-pane>
<!--            <el-tab-pane label="Email">Email</el-tab-pane>-->
<!--            <el-tab-pane label="Other Apps">Other Apps</el-tab-pane>-->
          </el-tabs>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">Cancel</el-button>
      <el-button size="small" type="primary" @click="submit" :loading="loading">{{ editNoticeData ? 'Update' : 'Confirm' }}</el-button>
    </span>
  </el-dialog>
</template>

<script>

const typeOption = [{
  value: 'Info',
  label: 'Info',
  color: '#EA3829'
}, {
  value: 'Alert',
  label: 'Alert',
  color: '#147AF3'
}, {
  value: 'Notification',
  label: 'Notification',
  color: '#65DAD2'
}, {
  value: 'Update Released',
  label: 'Update Released',
  color: '#6D6D6D'
}]
import sendMSPbots from "@/views/modules/mspbots/notification-setting/create-notice/components/sendMSPbots.vue";
export default {
  name: "create-notice",
  props: ['visible', 'editNoticeData'],
  components: {
    sendMSPbots
  },
  computed: {
    templateSetting() {
      return templateSetting
    },
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data () {
    return {
      options: typeOption,
      loading: false,
      form: {
        name: '',
        type: 'Info',
        colour: '',
        tenants: 'all',
        notifyType: '',
        executionType: 1,
        sendTime: [],
      },
      formRules: {
        name: [
          { required: true, message: 'Please Enter', trigger: 'blur' },
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          const currentDate = new Date();
          return time.getTime() < currentDate.getTime();
        }
      }
    }
  },
  methods: {
    close () {
      this.$refs['form'].resetFields()
      this.$refs['sendMspbots'].$refs['form'].resetFields()
      this.$emit('close')
    },
    open () {
      if (this.editNoticeData) {
        const { name, type, colour, tenants, notifyType, executionType, status, paramsValue, startTime, endTime } = this.editNoticeData
        this.form = {
          name,
          type,
          colour,
          tenants,
          notifyType,
          executionType,
          status,
          sendTime: executionType === 1 ? [] : [startTime, endTime]
        }
        this.$nextTick(() => {
          this.$refs['sendMspbots'].mspForm.bannerTitle = paramsValue.bannerTitle
          this.$refs['sendMspbots'].mspForm.bannerContent = paramsValue.bannerContent
          this.$refs['sendMspbots'].mspForm.send.bannerNotification = paramsValue.bannerNotification
        })
      }
    },
    async addNotice (param) {
      this.loading = true
      const {
        name,
        type,
        colour,
        tenants,
        executionType
      } = this.form
      const params = {
        userId: this.$store.state.user.id,
        name,
        type,
        colour,
        tenants,
        notifyType: 'banner',
        executionType,
        status: this.editNoticeData ? this.editNoticeData.status : 1,
        paramsValue: param,
        startTime: executionType === 1 ? '' : this.form.sendTime[0],
        endTime: executionType === 1 ? '' : this.form.sendTime[1]
      }
      const { addNotice, updateNotice } = this.$interface.notice
      const requestApi = this.editNoticeData && this.editNoticeData.status === 0  ? updateNotice : addNotice
      const { data } = await requestApi(params, this.editNoticeData ? this.editNoticeData.id : '')
      if ( data.code === 0) {
        this.$message.success('Success')
        this.loading = false
        this.dialogVisible = false
        this.$emit('success')
      } else {
        this.$message.error(data.msg)
      }
    },
    submit () {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          const data = await this.$refs['sendMspbots'].submit()
          if (data) {
            await this.addNotice(data)
          }
        } else {
          return false
        }
      })
    },
    changeColor (val) {
      // this.form.colour = this._.find(this.options, { value: val }).color
    }
  }
}
</script>

<style scoped lang="scss">
.fontBold  ::v-deep .el-form-item__label {
  font-weight: bold;
}
.boxPadding{
  padding: 8px 0;
  display: flex;
  align-items: center;
  font-size: 14px;
}
::v-deep .el-dialog__body {
  //max-height: 60vh;
  //overflow: auto;
}
</style>